<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="keywords" content=""/>
	<meta name="description" content=""/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
	
	<!--Set render engine for 360 browser-->
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta name="format-detection" content="telephone=no"/>
	<meta http-equiv="Page-Enter" content="revealTrans(duration=4.0, transition=22)">
	<meta http-equiv="Page-Exit" content="revealTrans(duration=4.0, transition=22)">
	
	<!--No Baidu Siteapp-->
	<meta http-equiv="Cache-Control" content="no-siteapp"/>
	
	<!--Add to homescreen for Chrome on Android-->
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="default">
	<meta name="apple-mobile-web-app-title" content="弹溜溜"/>
	<!--Tile icon for Win8(144x144+tile color)-->
	<meta name="msapplication-TileColor" content="#0e90d2">
	<title>弹溜溜</title>
	<link rel="stylesheet" type="text/css" href="/static/mobile/css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="/static/mobile/css/common.css">
	<link rel="stylesheet" type="text/css" href="/static/mobile/css/index.css">
	<link rel="stylesheet" type="text/css" href="/static/mobile/css/validate.css">
        <script type="text/javascript" src="/static/js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="/static/js/jquery-mvalidate.js"></script>
        <script type="text/javascript" src="/static/js/h5-mobile-common-min-1.0.js"></script>
        <script type="text/javascript" src="/static/js/h5-mui.min.js"></script>
</head>
<body style="background: #f0f0f0;" id="scroll_box">
    <script type="text/javascript">
        var from_u = <{$from_user}>;
        var to_u = <{$to_user}>;
    </script>
    <style type="text/css">
    	#pullrefresh .mui-pull-top-pocket{
			position: fixed;
			z-index: 1000;
			top: -10px;
		}
    </style>
	<!--下拉刷新容器-->
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
		<div class="app-chat p10 mui-scroll dialogue-con" id="app-chat">
		    <ul class="mui-table-view mui-table-view-chevron dialogue-content-box"  id="message-dialog-box">
                        <{foreach from=$message_list item=val}>
                        <{if $val['time_mark']}>
		    	<p class="time">-<{$val['time_mark']}>-</p>
                        <{/if}>
                        <{if $val['is_self']}>
		    	<li class="f-cb user user-fr" data-timestamp="<{$val['create_time']}>">
		    		<div class="head">
                                    <img src="<{$from_user_headimg}>"/>
		    		</div>
		    		<div class="text">
		    		   <b></b>
		    		    <{$val['content']}>
		    		</div>
		    	</li>
                        <{else}>
                        <li class="f-cb user user-fl" data-timestamp="<{$val['create_time']}>">
		    		<div class="head">
		    		    <img src="<{$to_user_headimg}>"/>
		    		</div>
		    		<div class="text">
		    		   <b></b>
		    		    <{$val['content']}>
		    		</div>
		    	</li>
                        <{/if}>
                        <{/foreach}>
		    </ul>
                    <div style="height:0px;"><a id="msg_end" name="1" href="#1">&nbsp;</a></div>
		</div>
	</div>
		<script type="text/javascript">
            window.onload = function(){
			    var s = sc();
			}
			function sc() {
			    var div = document.getElementsByClassName("app-chat")[0];
			    var div1 = document.getElementById("pullrefresh");
//			    console.log(div.scrollHeight);
			    div.scrollTop = div.clientHeight;
			    div1.scrollTop = div.clientHeight;
			}
			
		</script>
        <script type="text/javascript">
            function go_auto(){
                document.getElementById("msg_end").click();
            }
            mui.ready(function(){
//              $('#message-dialog-box').scrollTop($('#message-dialog-box')[0].scrollHeight);
//                document.getElementById("msg_end").click();
//                var _ul = document.getElementById("message-dialog-box");
//                console.log(_ul.offsetHeight);
//                _ul.scrollTop = _ul.offsetHeight;
			});
            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        contentdown:"下拉加载更多",
                        contentrefresh:"正在加载...",
                        callback: pulldownRefresh
                    },
                    up:{}
                    
                }
            });
            /**
             * 下拉刷新具体业务实现
             */
            function pulldownRefresh() {
                var _li = $("#message-dialog-box").find("li:first");
                if(_li[0] == "undefined"){
                    return ;
                }
                setTimeout(function() {
                    var _time = _li.attr("data-timestamp");
                    $.ajax({url:"/mobile.php/chat_message.html",async:true,data:{fromId:from_u.uuid,toId:to_u.uuid,since_timestamp:_time},dataType:"json",success:function(res){
                        if(res.data.count > 0){
                            var list = res.data.list;
                            var str = "";
                            for(var i in list){
                                if(list[i].time_mark != 0){
                                    str += "<p class='time'>-"+list[i].time_mark+"-</p>";
                                }
                                if(list[i].is_self == 1){
                                    str += "<li class='f-cb user user-fr' data-timestamp='"+list[i].create_time+"'>";
                                }else{
                                    str += "<li class='f-cb user user-fl' data-timestamp='"+list[i].create_time+"'>";
                                }
                                str += "<div class='head'><img src='"+(list[i].is_self == 1 ? from_u.headImg : to_u.headImg)+"'/></div>";
                                str += "<div class='text'><b></b>"+list[i].content+"</div></li>"
                            }
                            return $("#message-dialog-box").prepend($(str));
                        }
                    }});
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
                }, 1000);
            }
	</script>
        <script type="text/javascript">
    
    if(window.WebSocket){
        
        
        function check_time(t){
            var _time = $("#message-dialog-box li:last").attr("data-timestamp");
            if(_time == "undefined"){
                return false;
            }
            if((t - parseInt(_time))/60 > 3 ){
                return true;
            }
            return false;
        }
        function format_time(time){
            var date = new Date(time*1000);
            Y = date.getFullYear() + '-';
            M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            D = date.getDate() + ' ';
            h = date.getHours() + ':';
            m = date.getMinutes() + ':';
            s = date.getSeconds() < 10 ? "0"+date.getSeconds() : date.getSeconds(); 
            return Y+M+D+h+m+s+"";
        }
        var Chat = {};
        Chat.socket = null;
        Chat.isSend = true;
        Chat.body = document.getElementsByName("body");
        Chat.connect = (function(host){
            Chat.socket = new WebSocket(host);
            Chat.socket.onopen = function () {//链接服务器
                Chat.socket.send(JSON.stringify({"from":from_u.uuid,"to":to_u.uuid,"cmd":"online"}));
                return $(".dialogue-con .dialogue-content-box").scrollTop($("#message-dialog-box")[0].scrollHeight);
            };
            Chat.socket.onclose = function () {//关闭链接
            };
            Chat.socket.onmessage = function (event) {//接受服务器数据
                
                var data = $.parseJSON(event.data);
                if(data.cmd == "timeout"){
                    $("#message-dialog-box li:last").append($("<span>!</span>"));
                    return $.mvalidateTip("链接超时，请刷新页面");
                }else if(data.cmd == "success"){
                    Chat.isSend = true;
                }else{
                    var html="";
                    if(check_time(data.time)){
                        html += "<p class='time'>- "+format_time(data.time)+" -</p>";
                    }

                    if(data.is_self == 1){
                        html += "<li class='f-cb user user-fr' data-timestamp='"+data.time+"'>";
                        html += "<div class='head'><img src='"+from_u.headImg+"'/></div>";
                        html += "<div class='text'><b></b>"+data.message+"</div>";
                        html += "</li>";
                    }else{
                        html += " <li class='f-cb user user-fl' data-timestamp='"+data.time+"'>";
                        html += "<div class='head'><img src='"+to_u.headImg+"'/></div>";
                        html += "<div class='text'><b></b>"+data.message+"</div>";
                        html += "</li>";
                    }

                    $("#message-dialog-box").append(html);
                    return go_auto();
                }
            };
            
            Chat.socket.onerror = function(evt){
            } 
        });
        Chat.initialize = function() {//初始化
            if (window.location.protocol == 'http:') {
                Chat.connect('ws://120.27.142.148:9508');
            } else {
                Chat.connect('wss://120.27.142.148:9508');
            }
        };
        Chat.sendMessage = (function(message) {//发送消息
            if (message != '') {
                if(!Chat.isSend){
                    $.mvalidateTip("操作过于频繁哦");return;
                }
                Chat.isSend = false;
                var this_time = parseInt((new Date().getTime())/1000);
                var html = "";
                var flag = check_time(this_time);
                if(flag){
                    html += "<p class='time'>- "+format_time(this_time)+" -</p>";
                }
                
                html += "<li class='f-cb user user-fr' data-timestamp='"+this_time+"'>";
                html += "<div class='head'><img src='"+from_u.headImg+"'/></div>";
                html += "<div class='text'><b></b>"+message+"</div>";
                html += "</li>";
                $("#message-dialog-box").append($(html));
                Chat.socket.send(JSON.stringify({"from":from_u.uuid,"to":to_u.uuid,"message":message,"cmd":"chats","time":flag==true?this_time:0}))
                return go_auto();
            }else{
                return $.mvalidateTip("内容不能为空哦");
            }
        });
        Chat.initialize();
        function sendMessage(msg){
            Chat.sendMessage(msg);
        }
    }
</script>
        
<{include file="public/footer.html"}>